<template>
  <div class="home-top w-100">
    <p class="home-title text-center">欢迎来到课程学习空间，共探知识深度</p>
    <div class="search bg-fff">
      <el-input
        v-model="searchCourse"
        placeholder="搜索相关课程"
        @change="suoadd"
      ></el-input>
      <img
        @click="suoadd"
        class="icon-size-16 icon-search"
        src="@/assets/images/ic_search.png"
      />
    </div>
  </div>
  <!-- 内容区域 -->
  <div class="home-content">
    <KcardIndex
      v-for="(item, index) in arr"
      :key="index"
      :item="item"
    ></KcardIndex>
  </div>
</template>

<script lang="ts" setup>
import KcardIndex from './components/KcardIndex.vue'
import { getSubjectDetail } from '@/services/Application'
import { useRouter } from 'vue-router'
const router = useRouter()
const searchCourse = ref()
const arr: any = ref([])
//年级过滤条件
const jsarr = ['1001', '1002', '1003']
const suoadd = () => {
  if (searchCourse.value) {
    const route = router.resolve({
      path: '/lookMore',
      query: { searchCourse: searchCourse.value }
    })
    window.open(route.href, '_blank') // 在新窗口打开
  }
}
// 获取数据并过滤
const getarr = async () => {
  const res = await getSubjectDetail()
  // 构建新数组
  arr.value = jsarr.map((item) => {
    // 过滤出与 jsarr 匹配的项
    const filtered = res.rows
      .filter((row: any) => row.deptCode === item)
      .slice(0, 4) // 只取前 4 条

    // 返回新对象
    return {
      name: getGradeName(item), // 根据 value 获取年级名称
      id: item,
      collegeList: filtered
    }
  })
  console.log(arr.value)
}

// 根据 value 获取年级名称
const getGradeName = (value: string) => {
  switch (value) {
    case '1001':
      return '初一'
    case '1002':
      return '初二'
    case '1003':
      return '初三'
    default:
      return '未知'
  }
}
onMounted(() => {
  getarr()
})
</script>

<style lang="scss" scoped>
.home-top {
  height: 230px;
  background-image: url('@/assets/head/pic_bg.png');
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: hidden;
  position: relative;
  .search {
    width: 320px;
    height: 32px;
    margin: 12px auto;
    border-radius: 2px;
    position: relative;
    .icon-search {
      position: absolute;
      right: 12px;
      bottom: 8px;
      cursor: pointer;
    }
  }
}
.home-title {
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 32px;
  color: #ffffff;
  line-height: 46px;
  margin-top: 70px;
}
.onCampus {
  width: 152px;
  height: 32px;
  background-image: url('@/assets/images/bt_campusversion_nor.png');
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 20px;
  right: 260px;
}
.courseDetail {
  width: 780px;
  height: 34px;
  padding: 0 24px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  right: 0;
}
.num-title {
  font-family:
    PingFang SC,
    PingFang SC;
  font-size: 14px;
}
.num {
  font-family:
    PingFang SC,
    PingFang SC;
  font-size: 22px;
  font-weight: 600;
}
// 内容
.home-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}
</style>
